<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
</head>
<body>
  <div id="app" class="container" style="padding-top: 100px;">
    <input v-model="keyword" type="text" class="form-control" placeholder="输入搜索关键字" style="margin-bottom: 15px;width:195px">
    <table class="table table-bordered ">
      <thead>
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in brandList" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime}}</td>
          <td><a href="#" @click.prevent="delBrand(item.id)">删除</a></td>
        </tr>
        <tr v-if="brandList.length===0">
          <td colspan="4" style="text-align: center;">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <!-- 表单 -->
    <form class="form-inline" @submit.prevent="addBrand()">
      <div class="form-group" style="margin-right: 10px;">
        <input v-model="brandName" type="text" class="form-control" placeholder="请输入品牌">
      </div>
      <!-- submit点击会触发form的默认提交行为，form安装action进行跳转 -->
      <button type="submit" class="btn btn-primary">添加品牌</button>
    </form>
  </div>
  <script src="./vue.js"></script>
  <script src="./axios.min.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 列表数据
        brandList: [],
        // 品牌名称
        brandName: '',
        // 关键字
        keyword: ''
      },
      watch: {
        keyword () {
          // 监听keyword改变了
          // 发模糊查询请求
          axios.get('http://localhost:3000/brands',{
            params: {
              name_like: this.keyword
            }
          }).then(res=>{
            // 接收模糊查询的列表
            this.brandList = res.data
          })
        }
      },
      // vue的配置选项：created 它是一个函数，vue实例完毕后执行
      created () {
        this.getBrands()
      },
      methods: {
        // 发起获取品牌列表的请求
        getBrands () {
          axios.get('http://localhost:3000/brands').then(res=>{
            // 请求成功 
            // res.data 得到的请求列表
            this.brandList = res.data
          })
        },
        // 删除品牌
        delBrand (id) {
          if (confirm('您确认删除该品牌吗？')) {
            axios.delete(`http://localhost:3000/brands/${id}`).then(res=>{
              this.getBrands()
            })
          }
        },
        // 添加品牌
        addBrand () {
          // 验证
          if (!this.brandName.trim()) return alert('请输入品牌名称')
          // 添加请求
          axios.post('http://localhost:3000/brands',{
            name: this.brandName,
            ctime: new Date()
          }).then(res=>{
            // 添加成功
            this.getBrands()
            this.brandName = ''
          })
        } 
      }
    })
  </script>
</body>

</html>